<template>
  <a-card :bordered="false">
    <!-- 操作按钮区域 -->
    <div class="table-operator">
      <a-button @click="add" type="primary" icon="plus">新增</a-button>
    </div>

    <!-- table区域 -->
    <div>

      <s-table
        ref="table"
        rowKey="id"
        :showPagination="false"
        :columns="columns"
        :data="loadData"
      >

        <!-- 字符串超长截取省略号显示 -->
        <span slot="url" slot-scope="text">
          <ellipsis :length="25" tooltip>
            {{ text }}<a-icon type="home" />
          </ellipsis>
        </span>

        <span slot="icon" slot-scope="text">
          <a-icon :type="text" />
        </span>

        <span slot="action" slot-scope="text, record">
          <a @click="edit(record)">编辑</a>
          <a-divider type="vertical"/>
          <a-popconfirm title="确定删除吗?" @confirm="() => del(record.id)">
            <a>删除</a>
          </a-popconfirm>
        </span>
      </s-table>
    </div>

    <permission-modal ref="modal" @ok="refreshTable"></permission-modal>

  </a-card>
</template>

<script>
import { STable, Ellipsis } from '@/components'
import { apiQueryPermissionList, apiDelPermission } from '@/api/system'
import PermissionModal from './modules/PermissionModal'

const columns = [
  {
    title: '菜单名称',
    dataIndex: 'menuName',
    key: 'menuName'
  },
  {
    title: '菜单图标',
    dataIndex: 'icon',
    key: 'icon',
    scopedSlots: { customRender: 'icon' }
  },
  {
    title: '菜单路径',
    dataIndex: 'url',
    key: 'url',
    scopedSlots: { customRender: 'url' }
  },
  {
    title: '组件',
    dataIndex: 'componentName',
    key: 'componentName',
    scopedSlots: { customRender: 'componentName' }
  },
  {
    title: '授权标识',
    dataIndex: 'permissions',
    key: 'permissions'
  },
  {
    title: '排序',
    dataIndex: 'orderNum',
    key: 'orderNum'
  },
  {
    title: '操作',
    dataIndex: 'action',
    scopedSlots: { customRender: 'action' },
    align: 'center',
    width: 200
  }
]

export default {
  name: 'PermissionList',
  components: {
    STable, Ellipsis, PermissionModal
  },
  data () {
    return {
      columns,
      queryParam: {},
      loadData: param => {
        return apiQueryPermissionList(Object.assign(param, this.queryParam)).then(res => {
          return res
        })
      }
    }
  },
  methods: {
    add () {
      this.$refs.modal.show('新增')
    },
    edit (record) {
      this.$refs.modal.show('修改', record)
    },
    refreshTable () {
      this.$refs.table.refresh(true)
    },
    showDataRule (record) {
      this.$refs.permissionDataRuleList.show('数据权限规则', { permissionId: record.id })
    },
    del (id) {
      apiDelPermission(id).then(res => {
        this.$message.success(res.msg)
      }).finally(() => {
        this.refreshTable()
      })
    }
  }
}
</script>

<style scoped>

</style>
